<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.search {
				position: relative;
				width: 178px;
				margin: 100px;
			}

			.con {
				display: none;
				position: absolute;
				top: -40px;
				width: 171px;
				border: 1px solid rgba(0, 0, 0, .2);
				box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
				padding: 5px 0;
				font-size: 18px;
				line-height: 20px;
				color: #333;
			}

			.con::before {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				top: 28px;
				left: 18px;
				border: 8px solid #000;
				border-style: solid dashed dashed;
				border-color: #fff transparent transparent;
			}

			.jd {
				color: lightgray;
			}
		</style>
	</head>
	<body>
		<div class="search">
			<div class="con">
			</div>
			<input type="text" value="输入快递单号" class="jd" />
		</div>
		<script type="text/javascript">
			//快递单号输入内容时,上面的大号字体盒子(con)显示更大号的字体
			//表单检测用户输入
			var con = document.querySelector(".con");
			var jd = document.querySelector(".jd");

			jd.addEventListener("click", function() {
				jd.value = "";
				this.style.color = "black"
			})

			//注意: keydown和keypress在文本框中的特点,他们两个事件的触发的时候,文字还没有落入文本框中
			jd.addEventListener("keyup", function() {
				if (this.value == "") {
					con.style.display = "none";
				} else {
					con.style.display = "block";
					con.innerHTML = this.value;
				}
			})

			//当失去焦点,则隐藏
			jd.addEventListener("blur", function() {
				con.style.display = "none";
			})

			//当获得焦点
			jd.addEventListener("focus", function() {
				if (this.value !== "") {
					con.style.display = "block";
				}
			})
		</script>
	</body>
</html>
